/*
 * @Title: 个人游记瀑布流组件
 * @Created by: gsjPC 
 */
<template>
	<view class="flow-box" :style="'height: ' + loadingTop + 'px'">
		<view class="item"
			:class="left[index] == 1 ? 'left' : ''"
			:style="'top:' + top[index] + 'px;'"
			v-for="(item, index) in newList" :key="index"
			:data-index="index"
			 @tap="choose">
			<view class="pic" @tap="goMyTourNote">
				<!-- :style="{height:imgHeight + 'px'}" -->
				<image 
				class="image" 
				mode="widthFix"
				:src="item.image">
				</image>
				<view class="area"><uni-icon type="location" size="16" color="#333"></uni-icon><text>{{item.area}}</text></view>
			</view>
			<view class="content">
				<view class="pblCon">
					<text>{{item.type}}</text>
					<text>{{item.content}}</text>
				</view>
				<view class="myNoteUser">
					<view>
						<view class="mynoteTouxiang">
							<image style="width: 40upx; height: 40upx; border-radius: 50%; margin-right: 10upx;" 
							:src="item.user.avatar"></image>
						</view>
						<view class="mynoteInfo"><text>{{item.user.name}}</text><text>{{item.timer}}</text></view>
					</view>
					<view class="nynoteZan" @tap="dianzan">
						<image :src="zan[zanImgIndex]"></image>
						<text>赞</text></view>
				</view>
			</view>
		</view>
		<view class="loading" v-show="loading" :style="'top: ' + loadingTop + 'px'" >
			<image src="/static/loading.gif" style="width: 80upx; height: 80upx;"></image>
		</view>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon'
	export default {
		components:{
			uniIcon
		},
		props: {
			// 数据列表
			list: {
				type: Array,
				default() {
					return []
				}
			},
			// 加载动画
			loading: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				mark: 0,
				newList: [],
				boxHeight: [],
				top: [], 
				left: [],
				loadingTop: 0,
				zanImgIndex:0,//默认选中第一个未点赞图标
				zan:[require('../../static/zan.png'),require('../../static/glZan1.png')]
			}
		},
		watch: {
			// 数据
			list: function (newVal, oldVal) {
				this.mark = oldVal.length;
				if (newVal != oldVal) {
					this.newList = this.list;
					this.$nextTick(function () {
						setTimeout(() => {
							this.waterFall();
						}, 120)
					})
				}
			}
		},
		methods: {
			// 瀑布流定位
			waterFall() {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.flow-box .item').boundingClientRect(res => {
					let len = this.newList.length;
					let height = 0;
					for (let i = this.mark; i < len; i++) {
						height = res[i].height;
						if (i < 2) {
							this.$set(this.newList[i], 'top', 0);
							this.$set(this.newList[i], 'left', i);
							this.boxHeight.push(height);
							this.top.push(0);
							this.left.push(i);
						} else {
							let minHeight = this.boxHeight[0];
							let index = 0;
							if (minHeight > this.boxHeight[1]) {
								minHeight = this.boxHeight[1];
								index = 1;
							}
							this.boxHeight[index] = minHeight + height + 5;
							this.top.push(minHeight + 5);
							this.left.push(index);
							this.$set(this.newList[i], 'top', minHeight + 5);
							this.$set(this.newList[i], 'left', index);
							this.loadingTop = this.boxHeight[index];
						}
					}
				}).exec();
			},
			// 选中
			choose(e) {
				
			},
			//点赞图标
			dianzan(){
				this.zanImgIndex = 1 ? '1' : '0'
			},
			goMyTourNote(){
				uni.navigateTo({
					url:'./tourNoteDetails'
				})
			}
		},
		computed:{
			imgHeight(){
				return Math.floor(Math.random() * (300 - 200)) + 90
			}
		}
	}
</script>

<style scoped>
	.flow-box {
		position: relative;
		color: #1a1a1a;
		padding-bottom: var(--window-bottom);
	}
	.flow-box .item {
		position: absolute;
		left: 10upx;
		width: calc(50% - 20upx);
		border: 1upx solid #f9f9f9;
		background: #fff;
	}
	.flow-box .left {
		left: 380upx;
	}
	.flow-box .pic {
		background: #ddd;
		border-radius: 10upx;
		position: relative;
	}
	.pic image{
		width: 100%;
		display: block;
	/* 	max-height: 520upx;
		min-height: 180upx; */
	}
	.pic .area{
		position: absolute;
		z-index: 9;
		left: 28upx;
		bottom:18upx;
		border-radius: 5upx;
		height: 30upx;
		line-height: 30upx;
		background: rgba(255,255,255,0.8);
		font-size: 20upx;
		color: #333333;
		font-weight: bold;
		padding:0 26upx;
		display: flex;
		flex-direction:row;
		align-items: center;
		justify-content: center;
	}
	.flow-box .pic image{
		border-radius: 10upx;
	}
	.flow-box .content {
		padding: 20upx;
		padding-bottom: 40upx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.pblCon{
		line-height: 42upx;
		height: 88upx;
		overflow: hidden;
	}
	.flow-box .pblCon text:first-child{
		padding:0 5upx;
		border-radius: 5upx;
		margin-right: 10upx;
		height: 30upx;
		line-height: 30upx;
		display: inline-block;
		background: linear-gradient(left,#54B1FF,#5873FF);
		color: #fff;
		font-size: 20upx;
	}
	.flow-box .pblCon text:nth-child(2){
		width: 100%;
		font-size: 24upx;
		margin-bottom: 20upx;
	}
	.myNoteUser{
		width:100%;
		height: 70upx;
		margin-top:30upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.myNoteUser>view{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		}
	.mynoteTouxiang image{
		display: block;
		width:60upx;
		height:60upx;
		border-radius:60upx;
		background-color: #ddd;
	}
	.mynoteInfo{
		margin-left: 10upx;
	}
	.mynoteInfo text{
		color: #666666;
		display: block;
	}
	.mynoteInfo text:first-child{
		font-size: 20upx;
	}
	.mynoteInfo text:nth-child(2){
		font-size: 20upx;
		max-width:100%;
		overflow: hidden;
		white-space:nowrap;
		text-overflow: ellipsis;
	}
	.nynoteZan{
		font-size:20upx;
		color: #999999;
		
	}
	.nynoteZan image{
		width:29upx;
		height: 25upx;
		margin-right: 10upx;
	}
	.loading {
		position: absolute;
		width: 100%;
		text-align: center;
		padding: 20upx 0;
	}
	
</style>

